<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>background-img</title>
    <script src = 'jquery-1.12.4.min.js'></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            border: none ;
        }
    </style>
    <script>
        jQuery(function ($) {
            //背景插件
            $.back=(function (opt) {
                //便利循环填入的路径 动态添加img标签
                $.each(opt.img,function (i,o) {
                    $('<img/>').css({
                        width:document.documentElement.clientHeight + 'px',
                        height:document.documentElement.clientHeight + 'px',
                        position: "absolute",
                        top:'0',
                        left:'0',
                        opacity:'0'
                    }).addClass('Img').attr({'src':o}).appendTo(document.body)
                });

            });

            //窗口缩放
            $(window).resize(function () {$('.Img').width(document.documentElement.clientWidth).height(document.documentElement.clientHeight)});

            //获取到所有的img 把第一张显示出来
            $('.Img').eq(0).attr({opacity:'1'});

            //背景切换效果
            window.setInterval(function () {
                $('.Img').eq($('.Img').data('new_num')).animate({opacity:0},opt.t);
                if($('.Img').data('new_num') + 1 == opt.img.length){
                    $('.Img').data({'new_num':'-1'});
                }
                $('.Img').eq($('.Img').data('new_num') + 1).animate({opacity:1},opt.t);

                $('.Img').data({
                    'new_num' : ($('.Img').data('new_num')) + 1
                });
            },opt.time*1000);


            //调用背景插件
            $.back({
                img:[
                    '../img/IMG_2172.JPG',
                    '../img/IMG_2173.JPG',
                    '../img/IMG_2174.JPG',
                    '../img/IMG_2175.JPG',
                    '../img/IMG_2176.JPG',
                    '../img/IMG_2177.JPG',
                    '../img/IMG_2178.JPG'
                ],
                time:2,
                t:2,
                result:'slide'
            })
        });
    </script>
</head>
<body>

</body>
</html>